const path=require('path');//只要在node环境中就可以加载path
const htmlWebpackPlugin=require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports={
	// devtool: "sourcemap",
	entry:path.join(__dirname,"./src/main.js"),
	output:{
		path:path.join(__dirname,"./dist"),//__dirname:表示当前目录
		filename:"bundle.js"
	},
	 mode: 'development',//去掉屎黄色
	plugins: [
	 	new htmlWebpackPlugin({
	 		template:path.join(__dirname,'./src/index.html'),
	 		filename:'index.html'
	 	}),
	 	new VueLoaderPlugin()
	 ],
	 module:{
	 	rules:[
	 		// {test:/\.css$/,use:['style-loader','css-loader']},
	 		{test:/\.vue$/,use:'vue-loader'},
	 		{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },
			{test: /\.scss$/,use: ['style-loader','css-loader','sass-loader']},
			{test: /\.js$/, use: 'babel-loader', exclude:/node_modules/ },
			{test: /\.css$/,use: ['vue-style-loader','css-loader']},
			{test: /\.(jpe?g|png|gif|svg)$/i,use: [{loader: 'url-loader',options: {esModule: false}}]}
	 	]
	 	},
	   resolve: {
   		 alias: { // 修改 Vue 被导入时候的包的路径
      "vue$": "vue/dist/vue.js"
    }
}
}
//运行过程
// 当我们在 控制台，直接输入 webpack 命令执行的时候，webpack 做了以下几步：
//  1. 首先，webpack 发现，我们并没有通过命令的形式，给它指定入口和出口
//  2. webpack 就会去 项目的 根目录中，查找一个叫做 `webpack.config.js` 
//  的配置文件
//  3. 当找到配置文件后，webpack 会去解析执行这个 配置文件，当解析执行完配置文件后，
//  就得到了 配置文件中，导出的配置对象
//  4. 当 webpack 拿到 配置对象后，就拿到了 配置对象中，指定的 入口  和 出口，
//  然后进行打包构建；